<template>
  <div class="echart" :id="acc.id" :style="{ width: '100%', height: '100%' }"></div>
</template>

<script>
import echarts from 'echarts';
export default {
  data () {
    return {
      acc: {
        id: 'ac1',
        color: ['#3883FC', '#0055DE'],
        data1: [],
        data2: []
      },
      axisLabel: {
        show: true,
        textStyle: {
          color: '#1D396B'
        }
      },
      axisLine: {
        lineStyle: {
          type: 'solid',
          color: '#E0E7EC', // 左边线的颜色
          width: '1'// 坐标线的宽度
        }
      },
      axisTick: {
        show: false
      }
    };
  },
  mounted () {
    setTimeout(() => {
      this.initChart();
    }, 1000);
  },
  methods: {
    initChart (data) {
      let getchart = echarts.init(document.getElementById(this.acc.id));
      var className = []
      this.acc.data1 = []
      this.acc.data2 = []
      data.forEach(item => {
        className.push(item.projectName)
        this.acc.data1.push(item.completeProgress)
        this.acc.data2.push(item.incompleteProgress)
      })
      var legend = ['完成进度', '未完成进度']

      var option = {
        title: {
          subtext: ''
        },
        dataZoom: [
          // Y轴滑动条
          {
            type: 'slider', // 滑动条
            show: true, // 开启
            yAxisIndex: 0,
            right: '0', // 滑动条位置
            width: '5',
            startValue: 0, // 从头开始。
            endValue: 4, // 一次性展示5个。
            fillerColor: '#C1C1C1', // 选中背景颜色
            backgroundColor: '#EBEEF5', // 没选中背景颜色
            borderColor: '#ffffff',
            showDataShadow: false, // 是否显示数据阴影 默认auto
            showDetail: false // 即拖拽时候是否显示详细数值信息 默认true
          },
          {
            type: 'inside',
            yAxisIndex: 0,
            zoomOnMouseWheel: false, // 滚轮是否触发缩放
            moveOnMouseMove: true, // 鼠标滚轮触发滚动
            moveOnMouseWheel: true
          }
        ],
        tooltip: {
          trigger: 'axis',
          axisPointer: { // 坐标轴指示器，坐标轴触发有效
            type: 'line' // 默认为直线，可选为：'line' | 'shadow'
          },
          formatter: function (params) {
            var htmlStr = '';
            htmlStr += '<div><span style="color:#fff;">' + params[0].name + '</span><br/> ';
            for (var i = 0; i < params.length; i++) {
            // 前面的原点和他的颜色
              htmlStr += '<span style="width: 10px;height: 10px;display:inline-block;margin-right:5px;border-radius: 50%;background-color:' + params[i].color + '"></span><span style="color:#fff;">' + params[i].seriesName + '：</span>' + '<span style="color:#fff;">' + params[i].value + '%</span><br/>';
            }
            htmlStr += '</div>';
            return htmlStr
          }
        },
        legend: {
          data: legend,
          left: 10,
          top: 12,
          itemWidth: 6,
          itemHeight: 6,
          icon: 'circle'
        },
        grid: {
          left: '2%',
          right: '5%',
          bottom: '5%',
          top: '16%',
          containLabel: true
        },
        barWidth: '60%',
        xAxis: {
          type: 'value',
          splitLine: {
            show: true,
            lineStyle: {
              color: '#EBEEF5'
            }
          },
          axisTick: {show: false}, // 尺寸边线
          axisLabel: {
            textStyle: {color: '#909399'}// 字体颜色
          },
          axisLine: {show: false}
        },
        yAxis: {
          type: 'category',
          axisTick: {show: false}, // 尺寸边线
          splitLine: {show: false},
          data: className,
          axisLabel: {
            textStyle: {color: '#C6CACD'}// 字体颜色
          },
          axisLine: {show: false}
        },
        series: [
          {
            type: 'bar',
            color: '#409EFF',
            name: legend[0],
            stack: true, // 堆叠默认、叠加。没有是叠加
            z: 11,
            // barGap: '-100%',//叠加重叠使用
            label: {
              show: true,
              position: 'left',
              offset: [60, 0],
              color: '#FFFFFF',
              formatter: function (params) {
                if (params.value !== 0) {
                  return params.value + '%';
                }
              }
            },
            data: this.acc.data1
          },
          {
            type: 'bar',
            color: '#ECF5FF',
            name: legend[1],
            stack: true, // 堆叠默认、叠加。没有是叠加
            z: 10,
            label: {
              show: true,
              position: 'left',
              offset: [50, 0],
              color: '#000000',
              formatter: function (params) {
                if (params.value !== 0) {
                  return params.value + '%';
                }
              }
            },
            data: this.acc.data2
          }
        ]
      };

      getchart.setOption(option);
      // 随着屏幕大小调节图表
      window.addEventListener('resize', () => {
        getchart.resize();
      });
    }
  }
};
</script>
